<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .pwTip{display: inline-flex;width:120px;height: 10px;margin: 4px 0;}
    .pwTip span{flex: 1;background: #ccc;margin: 0 2px;}
  </style>
</head>
<body>
  是否是图片格式：<input type="text" class="isImg"><span></span><br>
  <br>
  敏感词过滤：<textarea class="txt"></textarea><span></span><br>
  <br>
  密码：<input type="text" class="password">
  <div class="pwTip">
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
<script>

  
  // 2. 编写正则，通过文件名验证是否是图片文件
  //   ○ xxx.jpg
  //   ○ xxx.png
  //   ○ xxx.gif
  //   ○ xxx.jpeg
  //   ○ xxx.webp
  //   ○ xxx.doc
  //   ○ xxx.exe
  //   ○ xxx.ppt
  const isImg = document.querySelector(".isImg");
  isImg.oninput = function(){
    const reg = /^[^.]+\.(?:jpg|png|gif|jpeg|webp)$/;
    if(reg.test(this.value)){
      this.nextElementSibling.innerText = "是"
    }else{
      this.nextElementSibling.innerText = "否"
    }
  }

// 3. 身份证号
//   ○ 上网查规则
  const reg2 = /^[1-8][1-9][1-3]\d{3}\d{4}((0[1-9])|(1[0-2]))\d{2}\d{3}[\dX]$/;
  
// 4. 敏感词过滤
//   ○ 多个敏感放在一个数组中
//   ○ 使用正则完成
//   ○ 利用构造函数创建正则
//   ○ 基础：连续的相同的敏感词替换成一个*
//   ○ 高级：连续的不同的敏感词替换成一个*
  const txt = document.querySelector(".txt");
  const arr = ["abc", "666", "你好", "!"];
  txt.onchange = function(){
    let str = this.value;
    // 根据敏感词库中的数据，拼接正则字符
    let s = "";
    arr.forEach(val=>{
      s += val + "|";
    });
    // 根据正则字符创建正则
    const reg = new RegExp( "(" + s.slice(0, -1) + ")+" , "g");
    // 替换并显示
    this.nextElementSibling.innerText = str.replace( reg, "*" );
  }


// 5. 表单验证
//   ○ 用户名验证：数字字母下划线中划线中文，5~10位
//   ○ 密码验证：数字字母，6~10位
//   ○ 重复密码验证：与正则无关
//   ○ 手机号验证
//   ○ 邮箱验证
//   ○ 要求：每个输入框，边输入边验证输入框内容，在当前输入框后显示提示语
//   ○ 要求：点击按钮，所有输入框全部正确，提示成功，否则，提示失败


// 6. 密码强度
//   ○ 使用正则验证密码强度
//   ○ 有三个块，默认为灰色
//   ○ 弱：亮一个
//   ○ 中：亮两个
//   ○ 强：亮三个
  const pw = document.querySelector(".password");
  const tip = document.querySelectorAll(".pwTip span");

  pw.oninput = function(){
    const nReg = /\d/;
    const azReg = /[a-z]/i;
    const tsReg = /[^\da-z]/i;

    const str = this.value;

    let a=0,b=0,c=0;

    if(nReg.test(str)){
      a = 1;
    }
    if(azReg.test(str)){
      b = 1;
    }
    if(tsReg.test(str)){
      c = 1;
    }

    // 根据每种类型的状态值的累加和，判断哪些提示块需要高亮，哪些需要灰色
    for(let i = 0; i < tip.length; i++){
      if( i < a+b+c ){
        // 索引小于状态和，高亮
        tip[i].style.background = "red";
      }else{
        // 索引不小于状态和，灰色
        tip[i].style.background = "#ccc";
      }
    }
  }


  


  
</script>
</html>